<template>
  <div>
    <selectItem @changeSelect="changeSelect" :formItem="compConfig" :formNamePath="formNamePath"></selectItem>
  </div>
</template>

<script lang="ts" setup>
import { ref, computed, onMounted, nextTick } from "vue";
import selectItem from "../../formitem/select/index.vue";
import formItemForm from "./config";
import { useColumnModel } from "@/components/draggable/hooks/useColumnModel";
import { useModelStore } from "@/store/modules/model/column";
import request from "@/api/index";
import { useRoute } from 'vue-router'
const useModel = useModelStore();
const props = defineProps({
  element: [],
  formNamePath: [],
});
const route = useRoute()
const compConfig = ref(JSON.parse(JSON.stringify(formItemForm.component.settings)));
interface dataSourceType {
  [propName: string]: any;
}
const modelData = ref<dataSourceType>({ options: [] });
useColumnModel(
  compConfig,
  computed(() => props.element)
);

const changeSelect = (value: string) => {
  useModel.setData({ param: formItemForm.component.settings.param, value: value });
};
const fetchChannelMobileTplList = async () => {
  let params = {
    channelId: route.query.channelId,
  };
  let data = await request.fetchChannelMobileTplList(params) || [];
  nextTick(() => {
    let options: any[] = []
    data?.length && data.forEach((item: dataSourceType) => {
      let obj = {
        label: item,
        value: item
      }
      options.push(obj)
  });
    compConfig.value.options = options;
  });
};

onMounted(() => {
  route.query.channelId && fetchChannelMobileTplList();
});
</script>

<style lang="less" scoped></style>
